﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ManageSystem管理系统</title>
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="joinUserNum"  style="height: 800px; ">

	</div>
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>

	<script src="/resource/echarts/echarts.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
	<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>-->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

	<script type="text/javascript">
		var joinUserNum = echarts.init(document.getElementById('joinUserNum'));
		var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
		var bgColor = '#2E2733';

		var itemStyle = {
			star5: {
				color: colors[0]
			},
			star4: {
				color: colors[1]
			},
			star3: {
				color: colors[2]
			},
			star2: {
				color: colors[3]
			}
		};

		var data = [{
			name: '虚构',
			itemStyle: {
				color: colors[1]
			},
			children: [{
				name: '小说',
				children: [{
					name: '5☆',
					children: [{
						name: '疼'
					}, {
						name: '慈悲'
					}, {
						name: '楼下的房客'
					}]
				}, {
					name: '4☆',
					children: [{
						name: '虚无的十字架'
					}, {
						name: '无声告白'
					}, {
						name: '童年的终结'
					}]
				}, {
					name: '3☆',
					children: [{
						name: '疯癫老人日记'
					}]
				}]
			}, {
				name: '其他',
				children: [{
					name: '5☆',
					children: [{
						name: '纳博科夫短篇小说全集'
					}]
				}, {
					name: '4☆',
					children: [{
						name: '安魂曲'
					}, {
						name: '人生拼图版'
					}]
				}, {
					name: '3☆',
					children: [{
						name: '比起爱你，我更需要你'
					}]
				}]
			}]
		}, {
			name: '非虚构',
			itemStyle: {
				color: colors[2]
			},
			children: [{
				name: '设计',
				children: [{
					name: '5☆',
					children: [{
						name: '无界面交互'
					}]
				}, {
					name: '4☆',
					children: [{
						name: '数字绘图的光照与渲染技术'
					}, {
						name: '日本建筑解剖书'
					}]
				}, {
					name: '3☆',
					children: [{
						name: '奇幻世界艺术\n&RPG地图绘制讲座'
					}]
				}]
			}, {
				name: '社科',
				children: [{
					name: '5☆',
					children: [{
						name: '痛点'
					}]
				}, {
					name: '4☆',
					children: [{
						name: '卓有成效的管理者'
					}, {
						name: '进化'
					}, {
						name: '后物欲时代的来临',
					}]
				}, {
					name: '3☆',
					children: [{
						name: '疯癫与文明'
					}]
				}]
			}, {
				name: '心理',
				children: [{
					name: '5☆',
					children: [{
						name: '我们时代的神经症人格'
					}]
				}, {
					name: '4☆',
					children: [{
						name: '皮格马利翁效应'
					}, {
						name: '受伤的人'
					}]
				}, {
					name: '3☆',
				}, {
					name: '2☆',
					children: [{
						name: '迷恋'
					}]
				}]
			}, {
				name: '居家',
				children: [{
					name: '4☆',
					children: [{
						name: '把房子住成家'
					}, {
						name: '只过必要生活'
					}, {
						name: '北欧简约风格'
					}]
				}]
			}, {
				name: '绘本',
				children: [{
					name: '5☆',
					children: [{
						name: '设计诗'
					}]
				}, {
					name: '4☆',
					children: [{
						name: '假如生活糊弄了你'
					}, {
						name: '博物学家的神秘动物图鉴'
					}]
				}, {
					name: '3☆',
					children: [{
						name: '方向'
					}]
				}]
			}, {
				name: '哲学',
				children: [{
					name: '4☆',
					children: [{
						name: '人生的智慧'
					}]
				}]
			}, {
				name: '技术',
				children: [{
					name: '5☆',
					children: [{
						name: '代码整洁之道'
					}]
				}, {
					name: '4☆',
					children: [{
						name: 'Three.js 开发指南'
					}]
				}]
			}]
		}];

		for (var j = 0; j < data.length; ++j) {
			var level1 = data[j].children;
			for (var i = 0; i < level1.length; ++i) {
				var block = level1[i].children;
				var bookScore = [];
				var bookScoreId;
				for (var star = 0; star < block.length; ++star) {
					var style = (function (name) {
						switch (name) {
							case '5☆':
								bookScoreId = 0;
								return itemStyle.star5;
							case '4☆':
								bookScoreId = 1;
								return itemStyle.star4;
							case '3☆':
								bookScoreId = 2;
								return itemStyle.star3;
							case '2☆':
								bookScoreId = 3;
								return itemStyle.star2;
						}
					})(block[star].name);

					block[star].label = {
						color: style.color,
						downplay: {
							opacity: 0.5
						}
					};

					if (block[star].children) {
						style = {
							opacity: 1,
							color: style.color
						};
						block[star].children.forEach(function (book) {
							book.value = 1;
							book.itemStyle = style;

							book.label = {
								color: style.color
							};

							var value = 1;
							if (bookScoreId === 0 || bookScoreId === 3) {
								value = 5;
							}

							if (bookScore[bookScoreId]) {
								bookScore[bookScoreId].value += value;
							}
							else {
								bookScore[bookScoreId] = {
									color: colors[bookScoreId],
									value: value
								};
							}
						});
					}
				}

				level1[i].itemStyle = {
					color: data[j].itemStyle.color
				};
			}
		}

		var EchartJoinUserNumoption = {
			backgroundColor: bgColor,
			color: colors,
			series: [{
				type: 'sunburst',
				center: ['50%', '48%'],
				data: data,
				sort: function (a, b) {
					if (a.depth === 1) {
						return b.getValue() - a.getValue();
					}
					else {
						return a.dataIndex - b.dataIndex;
					}
				},
				label: {
					rotate: 'radial',
					color: bgColor
				},
				itemStyle: {
					borderColor: bgColor,
					borderWidth: 2
				},
				levels: [{}, {
					r0: 0,
					r: 40,
					label: {
						rotate: 0
					}
				}, {
					r0: 40,
					r: 105
				}, {
					r0: 115,
					r: 140,
					itemStyle: {
						shadowBlur: 2,
						shadowColor: colors[2],
						color: 'transparent'
					},
					label: {
						rotate: 'tangential',
						fontSize: 10,
						color: colors[0]
					}
				}, {
					r0: 140,
					r: 145,
					itemStyle: {
						shadowBlur: 80,
						shadowColor: colors[0]
					},
					label: {
						position: 'outside',
						textShadowBlur: 5,
						textShadowColor: '#333',
					},
					downplay: {
						label: {
							opacity: 0.5
						}
					}
				}]
			}]
		};
		joinUserNum.setOption(EchartJoinUserNumoption);
		window.addEventListener("resize", function () {
			joinUserNum.resize();
		});
	</script>
</body>
</html>
